import {
  Component,
  Input,
  TemplateRef,
  ChangeDetectionStrategy,
  ViewEncapsulation,
  ViewChild,
  SimpleChanges,
  OnChanges,
} from '@angular/core';
import { Subject } from 'rxjs';
import { InputBoolean, TypeUtils } from '../core/api';

@Component({
  selector: 'lv-wizard-step, [lv-wizard-step]',
  exportAs: 'lvWizardStep',
  template: '<ng-template #labelTemplate><ng-content></ng-content></ng-template>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {},
})
export class WizardStepComponent implements OnChanges {
  @Input() lvIcon: TemplateRef<void> = null;

  @Input() @InputBoolean() lvReadonly: boolean = false;

  @Input() lvDescription: string | TemplateRef<void> = null;

  @Input() lvStatus: 'wait' | 'process' | 'finish' | 'error' = null;

  @ViewChild('labelTemplate', { static: true }) label: TemplateRef<void>;
  public status = 'wait';
  public nextStatus = 'wait';
  public typeUtils = TypeUtils;

  public attrChange$ = new Subject<any>();

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.lvIcon || changes.lvStatus) {
      this.attrChange$.next(changes);
    }
  }
}
